<!-- 试卷预览组件 -->
<script setup lang='ts'>
  import { reactive, watch, nextTick, computed } from 'vue';
  import { dictionary, tableKeyList } from './conf'
  import { papaerDataType } from '@/common/types/paper-preview'

  const props = defineProps<{ 
    previewDialog: boolean
    paperData: papaerDataType
  }>();
  const emit = defineEmits<{
    (e: 'close'): void
  }>();

  const data = reactive({
    list: [],
    getData: false,
    params: {
      paperIds: ['']
    },
    totalNum: 0,
    showDialog: false
  })

  const paperInfo = computed(() => {
    const { 
      title, subTitle, brief, isEnabled,
      config, totalGrade, passGrade,
      totalNum 
    } = props.paperData;
    let baseInfo: string[] = [], configInfo: string[] = [], poolInfo: string[] = [];
    baseInfo = [
      `试卷：${title}`, 
      `试卷副标题：${subTitle || '-'}`, 
      `试卷简介：${brief || '-'}`, 
      `题库状态：${isEnabled === 1 ? '启用' : '禁用'}`
    ];

    let questionTypeStr: string[] = [];
    if (Array.isArray(config)) {
      config.forEach((item) => {
        const questionTypeMap = ['不限', '单选', '多选', '判断', '填空'];
        questionTypeStr.push(`${questionTypeMap[item.questType]} 共${item.totalNum}题，${item.perGrade}分/题`)
      })
    }

    configInfo = [
      ...questionTypeStr,
      `总分：${totalGrade}`,
      `及格分：${passGrade}`
    ]
    poolInfo = [
      `共计：${ totalNum }`
    ]
    return [
      {
        name: '基本信息',
        info: baseInfo
      },
      {
        name: '考试参数',
        info: configInfo
      },
      {
        name: '包含题库',
        info: poolInfo
      }
    ]
  })

  /**
   * 监听预览弹窗
   * 显示：获取预览试卷，对应题库
   * 隐藏：清除预览试卷id
   */
  watch(() => props.previewDialog, (val) => {
    nextTick(() => {
      if (val) {
        data.params.paperIds = [props.paperData.paperId]
        data.getData = true;
      } else {
        data.params.paperIds = ['']
      }
    });
  })

  interface summaryType {
    count: number
    questionType: number
  }
  const computedSummary = (summary: summaryType[]): string => {
    let formatStr = '';
    const typeMap = ['不限', '单选', '多选', '判断', '填空'];
    summary.forEach((item) => {
      formatStr += `${typeMap[item.questionType]}：${item.count}；`
    })
    return formatStr.slice(0, -1);
  }

  const dialogClosed = () => {
    emit('close');
  }
</script>

<template>
  <el-dialog title="试卷预览" v-model="previewDialog" width="980px" @closed="dialogClosed">
    <!-- 试卷描述 -->
    <el-table :data="paperInfo" :border="true" style="width: 100%">
      <el-table-column prop="name" label="模块" width="180"/>
      <el-table-column prop="info" label="详情" >
        <template #default="{row}">
          <div v-for="str in row.info" :key="str" style="margin-bottom:4px">{{str}}</div>
        </template>
      </el-table-column>
    </el-table>


    <!-- 试卷对应题库 -->
    <ListView
      :tableKeyList="tableKeyList"
      :list="data.list"
      :dictionary="dictionary"
      :hasHandle="false"
    >
      <template #summary="{row}">
        <span>{{computedSummary(row.summary)}}</span>
      </template>
    </ListView>
    <Pagination
      url="/training.exam.api/pool/list"
      v-model:list="data.list"
      v-model:getData="data.getData"
      :params="data.params" 
      :autoLoad="false"
      @setTotalNum="(num: number) => (data.totalNum = num)"
    ></Pagination>
  </el-dialog>
</template>

<style scoped>
  ._flex {
      display: flex;
  }
  ._flex_item {
      flex: 1;
  }
  .el-col {
      margin-bottom: 20px;
  }
</style>